// 首页 轮播大区域 的逻辑

import '../sass/_banner.scss'

// $(function()  {
// 轮播图
var bannerSwiper = new Swiper('.banner', {
    loop: true, // 循环模式选项
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
    },


    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    effect: 'fade',
    fade: {
        crossFade: false,
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    scrollbar: {
        el: '.swiper-scrollbar',
    },
})

// 鼠标移入显示 左右箭头
$('.banner_box_center').on('mouseover', () => {
    $('.banner_prev')
        .css('display', 'block')

    $('.banner_next')
        .css('display', 'block')
})
$('.banner_box_center').on('mouseout', () => {
    $('.banner_prev')
        .css('display', 'none')

    $('.banner_next')
        .css('display', 'none')
})
// 切换上下一页
$('.banner_prev').on('click', () => {
    bannerSwiper.slidePrev()
})

$('.banner_next').on('click', () => {
    bannerSwiper.slideNext()
    console.log(bannerSwiper.realIndex)
})

// 按钮切换
$('.one').on('click', () => {
    bannerSwiper.slideTo(0, 1000)
})
$('.two').on('click', () => {
    bannerSwiper.slideTo(1, 1000)
})
$('.three').on('click', () => {
    bannerSwiper.slideTo(2, 1000)
})
$('.four').on('click', () => {
    bannerSwiper.slideTo(3, 1000)
})
$('.five').on('click', () => {
    bannerSwiper.slideTo(4, 1000)
})
$('.six').on('click', () => {
    bannerSwiper.slideTo(5, 1000)
})
$('.seven').on('click', () => {
    bannerSwiper.slideTo(6, 1000)
})
$('.eight').on('click', () => {
    bannerSwiper.slideTo(7, 1000)
})


// 随轮播图切换, 更换背景颜色
const bgColor = document.querySelector('.banner_box')
if(bannerSwiper.realIndex == 0){
    bgColor.style.backgroundColor = "#F83885";
} else if ((bannerSwiper.realIndex) == 1) {
    bgColor.style.backgroundColor = "#3DB0F3";
} 
else if ((bannerSwiper.realIndex) == 2) {
    bgColor.style.backgroundColor = "#903725";
} 
else if ((bannerSwiper.realIndex) == 3) {
    bgColor.style.backgroundColor = "#3E52E7";
} 
else if ((bannerSwiper.realIndex) == 4) {
    bgColor.style.backgroundColor = "#8CECE8";
} 
else if ((bannerSwiper.realIndex) == 5) {
    bgColor.style.backgroundColor = "#840C0E";
} 
else if ((bannerSwiper.realIndex) == 6) {
    bgColor.style.backgroundColor = "#EBEBEB";
} 
else if ((bannerSwiper.realIndex) == 7) {
    bgColor.style.backgroundColor = "#87C7AC";
}

bannerSwiper.on('slideChange', function () {
    if (bannerSwiper.realIndex == 0) {
        bgColor.style.transition="all 0.1s";
        bgColor.style.backgroundColor = "#F83885";
    } 
    else if ((bannerSwiper.realIndex) == 1) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#3DB0F3";
    } 
    else if ((bannerSwiper.realIndex) == 2) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#903725";
    } 
    else if ((bannerSwiper.realIndex) == 3) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#3E52E7";
    } 
    else if ((bannerSwiper.realIndex) == 4) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#8CECE8";
    } 
    else if ((bannerSwiper.realIndex) == 5) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#840C0E";
    } 
    else if ((bannerSwiper.realIndex) == 6) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#EBEBEB";
    } 
    else if ((bannerSwiper.realIndex) == 7) {
        bgColor.style.transition="all 0s";
        bgColor.style.backgroundColor = "#87C7AC";
    }
});




// 导航侧边栏
console.log(list)

const nav_aside_lef_a = document.querySelector('.nav_aside_lef_info')
// const nav_aside_rig = document.querySelector('.nav_aside_rig')
const nav_aside_lef_box = document.querySelector('.nav_aside_lef')



// console.log(nav_aside_lef)
// 渲染页面
bindHtml()
// 渲染页面的函数
function bindHtml(){
    let str =''  
    list.forEach(item => {
       
        str += `
          <li data-id="${ item.id }">

        `
        // item.name 是一个数组, 有多少项就有多少个 span
        item.name.forEach((t, i) => {
          str += `
            <span>
            <a href="list.html">
            ${ t.title }
            </a>
            </span>
          `
        })

        str += `
          </li>
        `
      })
      nav_aside_lef_a.innerHTML = str
}


// 这一行获取元素必须放在后面, 因为放前面的话元素还没生成,拿到的是空 数组
const nav_aside_lef_li = nav_aside_lef_a.querySelectorAll('li')
const nav_aside_rig_xuanran = document.querySelector('.nav_aside_rig_box')


console.log(nav_aside_lef_li)
nav_aside_lef_li.forEach( item => {
    item.onmouseover = function(){
        // console.log(item.dataset.id)
        // 获取它身上的 id
        const id = item.dataset.id

        //从数组 List 中找到 Id 为 此 id 的那一条数据
        const data = list.find( item => item.id === id)

        // 拿着找到的这一条数据  渲染页面
        bindHtmlRight(data)
        
        // // 划过的时候, 给它加上 active 类名
        // nav_aside_rig.classList.add('active')
    } 
})

$('.nav_aside_lef').on('mouseover', () => {
    $('.nav_aside_rig').stop().show()
   
})
$('.nav_aside_rig').on('mouseout', () => {
    $('.nav_aside_rig').stop().hide()
})


// .nav_aside_lef.onmouseover = function(){
//     $('.nav_aside_rig').show().stop()
// }


// 离开左侧盒子的时候,  把 右侧的 active 移除掉, 让它隐藏
// nav_aside_rig.onmouseout = function(){
//     nav_aside_rig.classList.remove('active')
// }


    function bindHtmlRight(data) {

        let str = `
          <div class="left">
            <ul class="tags">
        `
  
        data.tags.forEach(item => {
          str += `
            <li>
              <span>${ item.title }</span>
            </li>
          `
        })
  
        str += `
            </ul>
            <ul class="cate_list">
        `
  
        data.children.forEach(item => {
          str += `
            <li>
              <div class="name">
                <span>${ item.title }</span>
              </div>
              <ol>
          `
  
          item.children.forEach(t => {
            str += `
              <li>${ t.title }</li>
            `
          })
  
          str += `
              </ol>
            </li>
          `
        })
  
        str += `
            </ul>
          </div>
          <div class="right">
            <ul class="small_list">
        `
  
        data.smallPics.slice(0, 8).forEach(item => {
          str += `
            <li>
              <img src="${ item.url }" alt="">
            </li>
          `
        })
  
        str += `
            </ul>
            <ul class="big_list">
        `
  
        data.bigPics.slice(0, 2).forEach(item => {
          str += `
            <li>
              <img src="${ item.url }" alt="">
            </li>
          `
        })
  
        str += `
            </ul>
          </div>
        `
  
        nav_aside_rig_xuanran.innerHTML = str
      }


 






